<template>
  <div>
    <div class="user_container">
      <div>
        <div class="userInfo">
          <van-image
            round
            width="2rem"
            height="2rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="user_name">成明</div>
        </div>
        <van-icon name="arrow" size="30" />
      </div>
    </div>
    <van-list
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },

  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
}
</script>

<style lang="less" scoped>
.user_container {
  width: 100%;
  height: 4.5rem;
  display: flex;
  background-image: url('./user.jpg');
  justify-content: center;
  align-items: center;
  div {
    display: flex;
    width: 100%;
    height: 2rem;
    justify-content: space-between;
    align-items: center;
    .user_name{
      margin-left: 0.4rem;
      font-size: 0.6rem;
      color: #666;
    }
  }
}
</style>
